<template>
  <div class="app-container">
    <el-form ref="formLabelAlign" :model="formLabelAlign" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="10">
          <el-form-item label="患者姓名" prop="customerName">
            <el-autocomplete
              v-model="formLabelAlign.customerName"
              :fetch-suggestions="querySearchAsync"
              placeholder="请输入患者姓名"
              @select="handleSelect"
            ></el-autocomplete>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="就诊类型" prop="visit">
            <el-select v-model="formLabelAlign.visit" placeholder="请选择">
              <el-option  key="初诊"  label="初诊"   value="初诊">   </el-option>
              <el-option  key="复诊"  label="复诊"   value="复诊">   </el-option>

            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="预约类型" prop="type">
            <el-radio-group v-model="formLabelAlign.type">
              <el-radio-button label="普通"></el-radio-button>
              <el-radio-button label="待定"></el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>

      </el-row>

      <el-row>
        <el-col :span="10">
          <el-form-item label="预约时间" prop="time">
            <el-time-select  style="width: 138px;"  v-model="formLabelAlign.time"   :picker-options="{  start: '08:30', step: '00:15',  end: '18:30'  }"  placeholder="选择时间">
            </el-time-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="10">
          <el-form-item label="持续时间" prop="sustain">
            <el-input v-model="formLabelAlign.sustain" type="number"  min="1" >
              <template slot="append">分钟</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="医生" prop="doctorId">
            <el-select v-model="formLabelAlign.doctorId" placeholder="请选择">
              <el-option    v-for="item in doctorList"   :key="item.name"   :label="item.name"   :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="预约项目" prop="checkList">
          </el-form-item>
        </el-col>
      </el-row>

      <el-collapse v-model="activeNames" style="margin-bottom: 10px;margin-left: 15px;" @change="handleChange">
        <el-collapse-item :title="item.name" :name="item.id"  v-for="item in reservationList">
          <el-checkbox-group v-model="formLabelAlign.checkList">
            <el-checkbox :label="subItem.id" :key="subItem.id" v-for="subItem in item.children" >{{subItem.name}}</el-checkbox>
          </el-checkbox-group>
        </el-collapse-item>

      </el-collapse>

      <el-form-item>
        <el-button type="primary" @click="save('formLabelAlign')" >新建预约</el-button>
        <el-button @click="cancel('formLabelAlign')">取消</el-button>
      </el-form-item>
    </el-form>


  </div>
</template>

<script>
import { get, save } from '@/api/requestCommon'
import { fail, showAttribute, resetForm, validate, success } from '@/api/common'
import { common } from '@/api/requestCommon'
export default {
  name: 'Info',
  props:{
    day: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      formLabelAlign:{customerId:'' ,doctorId:'',customerName:'',checkList:[],visit:'',sustain:'',time:'',type:''},
      rules:{
        customerName: [
          { required: true, message: '请输入患者姓名', trigger: 'change' }
        ],
        visit: [
          { required: true, message: '请选择就诊类型', trigger: 'change' }
        ],
        time: [
          { required: true, message: '请选择预约时间', trigger: 'change' }
        ],
        doctorId:[
          { required: true, message: '请选择医生', trigger: 'change' }
        ],
        checkList:[
          { required: true, message: '请勾选预约项目', trigger: 'change' }
        ],
        sustain:[
          { required: true, message: '请输入持续时间', trigger: 'change' }
        ]
      },
      activeNames: [],
      reservationList:[],
      doctorList: [],
      customerList: [],
      type:'subscribe'
    }
  },
  mounted() {
    this.loadDoctor()
    this.tree()
  },
  methods: {
    loadDoctor() {
      get('doctor/listAll').then(response => {
        showAttribute(response, this, 'doctorList')
      })
    },
    tree() {
      get('reservation/findTreeList').then(response => {
        if (response.code === 200) {
          this.reservationList = response.data
          this.reservationList.forEach(item => {
            this.activeNames.push(item.id)
          })
        } else {
          fail(response.msg)
        }
      })
    },
    save(formName) {
      this.formLabelAlign.day=this.day
      if (validate(this, formName)) {
        save(this.type, this.formLabelAlign).then(response => {
          if (response.code === 200) {
            success(response.msg)
            this.cancel(formName)
          } else {
            fail(response.msg)
          }
        })
      }
     },
    resetForm(formName) {
    },
    cancel(formName) {
      resetForm(this,formName)
      this.formLabelAlign.id=''
      this.formLabelAlign.customerName=''
      this.formLabelAlign.checkList=[]
      this.$emit('cancel')
    },
    handleChange(val) {
      console.log(val);
    },
    handleSelect(item) {
       this.formLabelAlign.customerId=this.customerList[item.index].id
     },
    querySearchAsync(queryString, cb) {
      let results = [];
      clearInterval(this.timeout);
      this.timeout = setTimeout(() => {
        common('customer/queryList', 'post', { queryString: queryString }).then(response => {
          let result = response.data;
          this.customerList = response.data
          this.optionsMatching = result.map((item, index) => {
            return {
              value: item.name,
              index: index
            };
          });
          results = this.optionsMatching;
          cb(results);
        });
      }, 100);
    }


  }
}
</script>

<style lang="scss">
.el-collapse-item__header{
  font-size: 14px;
  color: #606266;
  font-weight: bold;
}
</style>
